<template>
  <el-dialog
      v-model="dialogVisible"
      title="学生详细信息"
      :width="isMobile ? '90%' : '600px'"
      top="5vh"
  >
    <div v-if="student" class="student-detail">
      <!-- 头像展示区 -->
      <div class="avatar-container">
        <img
            :src="'/prod-api' + student.avatar"
            alt="学生照片"
            class="avatar"
        >
      </div>

      <!-- 信息展示区 -->
      <div class="info-container">
        <!-- 基础信息 -->
        <div class="info-section">
          <h3 class="section-title">基本信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">姓名：</span>
              <span class="value">{{ student.studentName }}</span>
            </div>
            <div class="info-item">
              <span class="label">性别：</span>
              <span class="value">{{ student.sex === '0' ? '男' : '女' }}</span>
            </div>
            <div class="info-item">
              <span class="label">学号：</span>
              <span class="value">{{ student.studentNo }}</span>
            </div>
          </div>
        </div>

        <!-- 联系人信息 -->
        <div class="info-section">
          <h3 class="section-title">联系人信息</h3>
          <div class="info-grid">
            <div class="info-item">
              <span class="label">联系人：</span>
              <span class="value">{{ student.parentName }}</span>
            </div>
            <div class="info-item">
              <span class="label">关系：</span>
              <span class="value">{{ student.parentType }}</span>
            </div>
            <div class="info-item">
              <span class="label">联系电话：</span>
              <a
                  :href="`tel:${student.phonenumber}`"
                  class="phone-link"
              >
                {{ student.phonenumber }}
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { defineProps, defineEmits, computed, ref } from 'vue'

const props = defineProps({
  modelValue: Boolean,
  student: Object
})

const emit = defineEmits(['update:modelValue'])

// 响应式判断移动端
const isMobile = ref(window.innerWidth < 768)

// 响应式对话框控制
const dialogVisible = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit('update:modelValue', value)
  }
})

// 监听窗口变化
window.addEventListener('resize', () => {
  isMobile.value = window.innerWidth < 768
})
</script>

<style scoped>
.student-detail {
  display: flex;
  gap: 20px;
  padding: 10px;
}

.avatar-container {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-container {
  flex: 1;
  min-width: 0;
}

.info-section {
  margin-bottom: 20px;
}

.section-title {
  color: #409EFF;
  font-size: 16px;
  margin: 0 0 12px 0;
  padding-bottom: 6px;
  border-bottom: 2px solid #eee;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 20px;
}

.info-item {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.label {
  color: #666;
  min-width: 70px;
}

.value {
  color: #333;
  font-weight: 500;
}

.phone-link {
  color: #409EFF;
  text-decoration: none;
  transition: all 0.3s;
}

.phone-link:hover {
  color: #337ecc;
  text-decoration: underline;
}

@media (max-width: 768px) {
  .student-detail {
    flex-direction: column;
    align-items: center;
  }

  .info-grid {
    grid-template-columns: 1fr;
  }
}
</style>